<template>
  <div id="app">
    <van-nav-bar
      v-show="showNavbar"
      title="高铁订餐"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      safe-area-inset-top
      placeholder
      fixed
      border
    />
    <!-- <nav-bar></nav-bar> -->
    <router-view v-if="routeState"/>
    <!-- 底部导航栏 -->
    <van-tabbar route
      v-show="showTabbar"
      v-model="active"
      active-color="#f44">
      <van-tabbar-item replace
        to="/home"
        icon="home-o">
        首页
      </van-tabbar-item>
      <van-tabbar-item replace
        to="/order-list"
        icon="todo-list-o">
        订单
      </van-tabbar-item>
      <van-tabbar-item replace
        to="/user"
        icon="manager-o">
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      active: '0',
      routeState: true
    }
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  created() {
    sessionStorage.getItem('mobile') && this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(sessionStorage.getItem('mobile'))))
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('mobile', JSON.stringify(this.$store.state))
    })
  },
  computed: {
    ...mapState(['user']),
    showTabbar() {
      return this.$route.name !== 'goods-detail' && this.$route.name !== 'login' && this.$route.name !== 'goods-reputation' && this.$route.name !== 'train'
    },
    showNavbar() {
      return this.$route.name !== 'login' && this.$route.name !== 'home' && this.$route.name !== 'user'
    }
  },
  methods: {
    /**
     * 刷新
     */
    reload() {
      this.routeState = false
      this.$nextTick(() => {
        this.routeState = true
      })
    },
    /**
     * 返回
     */
    onClickLeft() {
      if (this.$route.path !== '/home') {
        this.$router.go(-1)
      }
    }
  }
}
</script>
<style lang="less">
@import "~@styles/index.css";
body {
  font-family: "PingFang SC", Helvetica, "STHeiti STXihei", "Microsoft YaHei", Tohoma, Arial, sans-serif;
  background-color: #f8f8f8;
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  min-width: 320PX;
  max-width: 750PX;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
img {
  display: block;
  max-width: 100%;
  background: #eee;
  border: 0 none;
}
p {
  margin: 0;
}
a {
  color: inherit;
}
.btn-area:active,.btn-fav:active,.btn-danger:active,.btn-warning:active,.btn-gray:active{
  opacity: .8;
}
/* */
.fz12 {
  font-size: 12px;
}
.fz14 {
  font-size: 14px;
}
.fz16 {
  font-size: 16px;
}
.fz18 {
  font-size: 18px;
}
.fz24 {
  font-size: 24px;
}
.ml5 {
  margin-left: 5px;
}
.ml10 {
  margin-left: 10px;
}
.ml20 {
  margin-left: 20px;
}
.mr5 {
  margin-right: 5px;
}
.mb10 {
  margin-bottom: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.pd50 {
  padding-bottom: 50px;
}
.pd100 {
  padding-bottom: 100px;
}
.bgf {
  background: #fff;
}
.container-padding {
  margin: 15px;
  position: relative;
}
// .disabled{
//   pointer-events: none;
// }
/* common */
.copyright{
  color:#999;
  font-size: 14px;
  line-height:2;
  text-align:center;
}
.common-h2 {
  text-align: center;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  &-title {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #333;
  }
  &-title::before {
    content: "";
    background: url(./assets/line_askew.png);
    background-size: cover;
    width: 20px;
    height: 6px;
    position: absolute;
    left: -30px;
    top: 25px;
    font-size: 12px;
    color: #666;
  }
  &-title::after {
    content: "";
    background: url(./assets/line_askew.png);
    background-size: cover;
    width: 20px;
    height: 6px;
    position: absolute;
    right: -30px;
    top: 25px;
    font-size: 12px;
    color: #666;
  }
}
</style>
